<template>
  <div class="logout">
    <div class="top">
      <div class="top1">
        <div class="imgs">
          <img src="../../assets/images/logon.png" alt="" />
        </div>
        <div class="lefts">
          <div></div>
          <div class="lefts1">浙江省非物质文化<br />数字文献中心</div>
          <div class="lefts2">
            ZhejiangProvinceIntangibleCultureDigitalLiteratureCenter
          </div>
        </div>
      </div>
    </div>

    <div class="ris2">
      <div class="login">登录</div>
      <el-form ref="form" :model="formLogin">
        <el-form-item>
          <div class="i1" :class="activet == 0 ? 'i1' : 'i2'">
            <el-input v-model="formLogin.name" placeholder="请输入账号" @blur="handleBlur" @focus="handleFocus">
              <i slot="prefix" class="el-input__icon el-icon-user" style="font-size: 20px" v-if="activet == 0"></i>
              <i slot="prefix" class="el-input__icon el-icon-user" style="font-size: 20px; color: #333333" v-else></i>
            </el-input>
            <div class="zh">账号</div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="i1" :class="activet1 == 0 ? 'i1' : 'i2'">
            <el-input v-model="formLogin.padd" placeholder="请输入密码" @blur="handleBlur1" @focus="handleFocus1"
              type="password">
              <i slot="prefix" class="el-input__icon el-icon-lock" style="font-size: 20px" v-if="activet1 == 0"></i>
              <i slot="prefix" class="el-input__icon el-icon-lock" style="font-size: 20px; color: #333333" v-else></i>
            </el-input>
            <div class="zh">密码</div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="i1" :class="activet2 == 0 ? 'i1' : 'i2'">
            <el-input v-model="formLogin.code" placeholder="请输入验证码" @blur="handleBlur2" @focus="handleFocus2">
              <i slot="prefix" class="el-icon-edit el-icon-lock" style="font-size: 20px" v-if="activet2 == 0"></i>
              <i slot="prefix" class="el-icon-edit el-icon-lock" style="font-size: 20px; color: #333333" v-else></i>
            </el-input>
            <div class="zh">验证码</div>
            <div class="codes" @click="getCode">
              <img style="width:100%;height:44px" :src="codeUrl" />
            </div>
          </div>

          <!-- <img style="width:100%;height:40px" :src="codeUrl"  class="login-code-img"/> -->
        </el-form-item>
      </el-form>
      <div class="submit" @click="logins()">登录</div>
      <div class="fts">
        <!-- <div class="fts1" @click="onWxLogin">
          <i></i>
          微信登录
        </div> -->
        <div class="fts1"></div>
        <div class="fts2" @click="tologout()">暂无账号去注册！</div>
      </div>
    </div>
    <!-- <div class="wx_login">
      <div class="bind_top">
        <div></div>
        <i class="el-icon-close" @click="onClose"></i>
      </div>
      <div class="qr">
        <vue-qr :text="imgUrl" :size="bindSize" :margin="10" :logoScale="0.2"></vue-qr>
        <div class="tite">微信扫一扫登录</div>
      </div>

    </div> -->
  </div>
</template>
<script>
import { getLogin } from "@/api/api.js";
import VueQr from 'vue-qr'
export default {
  components: {
    VueQr
  },
  data() {
    return {
      formLogin: {
        name: "",
        padd: "",
        code: "",
      },
      activet: 0,
      activet1: 0,
      activet2: 0,
      codeUrl: '',
      wxShow: true,
      imgUrl: '',
      bindSize: 260,
      timer: null, //定时器
    };
  },
  created() { },
  mounted() {
    this.getCode()
    this.bindQr()

    // 定时请求是否确认登录
    this.timer = window.setInterval(() => {
      this.onRequest();
    }, 3000);
  },
  methods: {
    onRequest() {  //请求是否确定登录操作
      console.log('执行登录');
      // 登录成功清除定时器
      window.clearInterval(this.timer);
      this.timer = null;
      console.log('清除定时器');
    },
    bindQr() {
      let url = window.location.href
      this.imgUrl = url + 'confirm'
    },
    onClose() {
      this.wxShow = true
    },
    onWxLogin() {
      this.wxShow = false
    },
    tologout() {
      this.$router.push("/logout");
    },
    async login() {
      let res = await getLogin({
        yhm: this.formLogin.name,
        pwd: this.formLogin.padd,
        yzm: this.formLogin.code
      })
      if (res.code == 0) {
        this.$message({
          message: '登录成功！',
          type: 'success'
        });
        sessionStorage.setItem('loginInfo', JSON.stringify(res.data))
        sessionStorage.setItem('token', JSON.stringify(res.data.token))
        setTimeout(() => {
          //需要定时执行的代码
          this.$router.push("/index");
        }, 100)

      } else {
        this.$message.error(res.msg);
      }
    },
    logins() {
      if (this.formLogin.name == '') {
        this.$message.error('账号不能为空！');
      } else if (this.formLogin.padd == '') {
        this.$message.error('密码不能为空！');
      } else if (this.formLogin.code == '') {
        this.$message.error('验证码不能为空！');
      } else {
        this.login()
      }

    },
    getCode() {
      // let dataUrl =`https://fygo.zjich.cn/wxzxServer/literature/user/login_image`  
      let dataUrl = `http://10.0.105.111/wxzxServer/literature/user/login_image`
      this.$axios
        .get(dataUrl, {
          responseType: "arraybuffer",

        })
        .then((res) => {
          return (
            "data:image/jpeg;base64," + btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.codeUrl = data;
        })
        .catch((ex) => {
          // console.error(ex);
        });
    },
    handleBlur() {
      this.activet = 0;
    },
    handleFocus() {
      this.activet = 1;
    },
    handleBlur1() {
      this.activet1 = 0;
    },
    handleFocus1() {
      this.activet1 = 1;
    },
    handleFocus2() {
      this.activet2 = 1;
    },
    handleBlur2() {
      this.activet2 = 0;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input {
  display: flex;
  justify-content: center;
  color: #333333;
}

::v-deep .el-input--prefix .el-input__inner {
  width: 305px;
  // height: 46px;
  // background: url("../assets/images/inputs.png") no-repeat;
  // background-size: 100% 100%;
  border: 0px;
}

::v-deep .el-form-item {
  margin-bottom: 32px;
}

.logout {
  position: relative;
  width: 100%;
  height: 100vh;

  background: url("../../assets/images/bj2.png") no-repeat;
  background-size: 100% 100%;

  .top {
    width: 100%;
    height: 176px;
  }

  .top1 {
    width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;

    // background-color: pink;
    .imgs {
      width: 138px;
      height: 176px;
      z-index: 100;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .lefts {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 176px;
      margin-left: 32px;

      .lefts1 {
        font-size: 24px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        line-height: 35px;
        letter-spacing: 3px;
      }

      .lefts2 {
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #666666;
      }
    }

    .rights {
      width: 400px;
      position: relative;
      padding-bottom: 40px;

      .ris1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        width: 100%;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #3d3d3d;
      }

      .ri {
        padding-right: 30px;
      }

      .ri1 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 68px;
        height: 38px;
        background: #911f23;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        color: #fff;
        cursor: pointer;
      }
    }
  }

  .ris2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 360px;
    background: #ffffff;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.2);
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    z-index: 20;
    padding: 24px;

    .login {
      width: 100%;
      text-align: center;
      font-size: 24px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      padding-bottom: 24px;
    }

    .i1 {
      position: relative;
      width: 100%;
      height: 46px;
      background: url("../../assets/images/inputs.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .zh {
        position: absolute;
        top: -20px;
        left: 30px;
        font-size: 12px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #999999;
      }

      .codes {
        position: absolute;
        top: 1px;
        right: 1px;
        width: 100px;
        height: 100%;

        img {
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
        }
      }
    }

    .i2 {
      position: relative;
      width: 100%;
      height: 46px;
      background: url("../../assets/images/inputs1.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .zh {
        position: absolute;
        top: -20px;
        left: 30px;
        font-size: 12px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      }
    }

    .submit {
      width: 100%;
      height: 46px;
      background: #911f23;
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }

    .fts {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      font-size: 12px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;

      .fts1 {
        color: #911f23;
        cursor: pointer;
        display: flex;
        align-items: center;

        i {
          width: 20px;
          height: 20px;
          background: url('../../assets/images/wx.png') no-repeat;
          background-size: 100% 100%;
          display: inline-block;
          margin-right: 5px;
        }
      }

      .fts2 {
        color: #911f23;
        cursor: pointer;
      }
    }
  }

  .wx_login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 360px;
    background: #ffffff;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.2);
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    z-index: 20;
    padding: 24px;

    .bind_top {
      display: flex;
      justify-content: end;

      i {
        font-size: 25px;
        cursor: pointer;
      }
    }

    .qr {
      text-align: center;
      margin-top: 20px;

      .tite {
        font-size: 16px;
        margin-top: 10px;
      }
    }
  }
}
</style>